
/* login */
*{
	margin: 0;
	padding: 0;
}
html{
	width: 100%;
	height: 100%;
	background: url(../img/bg01.jpg) no-repeat;
	background-size: cover;
}
.loginbox {
		width: 360px;
		height: 250px;
		margin: 0 auto;
		top: 50%;
		margin-top: 15%;
		text-align: center;
		background-color: #0e0b2680;
		overflow: hidden;
	}
.loginbox .form{
	width: 300px;
	font-size: 18px;
	color: white;
	margin: 0 auto;
	margin-top: 10%;
	padding: 10px;
	border: 1px solid magenta;
}
.loginbox .form .item input{
	height: 30px;
	color: #FFFDEF;
	font-size: 18px;
	border: none;
	margin-top: 5px;
	padding: 2px 10px;
	background: #ffffff00;
	outline: none;
	border-bottom: 2px solid white;
}
.loginbox .form input:focus{
	background-color: #ff00ff50;
}
.loginbox .form button{
	position: relative;
	margin-top: 25px;
	width: 150px;
	height: 30px;
	border: none;
	border-radius: 15px;
	color: #FFFFFF;
	outline:medium;
	background-image:linear-gradient(90deg,#fd79a8,#74b9ff,#a09bb6,#fd79a8); 
	background-size: 400%;
	/* transition: 0.6s; */
	z-index: 1;

}
.loginbox .form button::before{
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	bottom: -5px;
	right: -5px;
	background-image:linear-gradient(90deg,#fd79a8,#74b9ff,#f8b0e3,#fd79a8); 
	background-size: 400%;
	border-radius: 15px;
	filter: blur(20px);
	z-index: -1;
}
.loginbox .form button:hover::before{
	animation: bSun 6s linear infinite;
}
.loginbox .form button:hover{
	cursor: pointer;
	animation: bSun 6s linear infinite;
}
@keyframes bSun{
	100%{
		background-position: 400% 0;
	}
}

::-webkit-input-placeholder { /* WebKit browsers */
  color: #FFFFFF30;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #FFFFFF30;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #FFFFFF30;
  font-size: 16px;
}   